import React, { Component } from 'react'
import "./mycourse.scss"
import { Pagination } from 'antd';
import { getApiUserCourse } from "../../axios/api"
import { get } from '../../axios/localstorage';

export default class mycourse extends Component {

    state = {
        banner:[],

        classList:[],

        page:1,
        total:1,

        currentIndex:0,
        keywords:'',
        typeArr:[],
        type:'',
        time:'',
        price:'',
        format:'',
        timeArr:[],
        priceArr:[],
        formatArr:[],
    }

    componentWillMount(){

        this.getData();
    }

    componentDidMount(){
        window.scroll(0,0);
    }

    initMyCourse=()=>{
        this.setState({
            page:1
        })
        this.getData();
    }
    
    getData=()=>{
        setTimeout(()=>{
            let param = {
                token:get('token'),
                // type:this.state.type,
                page:this.state.page,
                keyword:this.state.keywords,
                types:get('type')?get('type'):0,
            }

            getApiUserCourse(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        classList:data,
                    })
                }else{
                    this.setState({
                        classList:[],
                    })
                }
            }).catch( err =>{
                console.error(err);
            })

        },50)
    }


    gotoUrl=(item)=>{
        console.log(item);
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    changePage=(page)=>{
        console.log(page);
        this.setState({
            page
        })

        this.getData();
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/courseinfo?id='+id);
    }

    render() {
        return (
            <div className="mycourse">
                <div className="cmain">
                    <div className="title">
                        <h1>我的课程</h1>
                        <div className="right">
                            {/* <input type="text" placeholder="搜索课程名称" value={this.state.keywords} onChange={(ev)=>{this.setState({keywords:ev.target.value})}} />
                            <button onClick={()=>{this.initMyCourse()}}>搜索</button> */}
                        </div>
                    </div>
                    
                    <div className="cen">
                        <div className="h_course">
                            <div className="none" hidden={this.state.classList.length !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无此类课程</p>
                            </div>
                            <div className="box" hidden={this.state.classList.length === 0}>
                                {
                                    this.state.classList.map((item,index)=>{
                                        return <div className="item" key={index} onClick={()=>{this.gotoCourseInfo(item.course_id)}}>
                                                <div className="itop" style={{backgroundImage:"url('"+item.image_text+"')"}}>
                                                    {/* <div className="span" hidden={!item.is_new}>精品</div> */}
                                                    <div className="progress">
                                                        <h2>进度</h2>
                                                        <div>
                                                            <span style={{width:item.progress+'%'}}></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="ibom">
                                                    <h2>{item.title}</h2>
                                                    <p>{item.mtitle}</p>
                                                    <p>{item.tname}老师</p>
                                                    <div className="idiv">
                                                        <div>{item.nums}课时</div>
                                                        <h4>{item.sale_num}人参加</h4>
                                                    </div>
                                                </div>
                                            </div>
                                    })
                                }
                            </div>
                            
                        </div>
                    </div>
                </div>

                <div className='r_page' hidden={this.state.classList.length === 0}>
                    <Pagination type="primary" showSizeChanger={false} pageSize={12}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                </div>
            </div>
        )
    }
}
